<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="./common.css" type="text/css"/>
    <link rel="stylesheet" href="./admin.css" type="text/css"/>
    <link rel="stylesheet" href="./base.css" type="text/css"/>
    <script type="text/javascript" src="jquery-2.1.0.js"></script>
    <script type="text/javascript" src="common.js"></script>
    <style>
        .main{
            width:765px ;
            height: 927px;
            border: 1px solid red;
        }
        .high{
            width: 764px;
            height: 450px;
            border: 1px solid blue;
        }
        .low{
            width: 764px;
            height: 450px;
            border: 1px solid yellow;
            margin-top: 30px;

        }
    </style>
</head>

<body>

<div class="main">
      <div class="high">
          <!--<canvas id="myCanvas" width="720" height="350">-->

          <!--</canvas>-->
      </div>
      <div class="low"></div>
</div>
<!--<div style="margin:0 auto; width:1000px; height:800px; border:1px solid #ccc;">-->
    <!--&lt;!&ndash;&ndash;&gt;-->
    <canvas id="myCanvas" width="1000" height="800"></canvas>


<!--</div>-->

<script type="text/javascript">

    var colorArr = ["#789", "#abcdef", "#cff", "#9cf", "#99f", "#90f", "#3ff", "#009", "#606", "#f69", "#c66", "#963", "#c9c", "#360", "#693", "#036"];

    //扇形
    CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {
        // 初始保存
        this.save();
        // 位移到目标点
        this.translate(x, y);
        this.beginPath();
        // 画出圆弧
        this.arc(0,0,radius,sDeg, eDeg);
        // 再次保存以备旋转
        this.save();
        // 旋转至起始角度
        this.rotate(eDeg);
        // 移动到终点，准备连接终点与圆心
        this.moveTo(radius,0);
        // 连接到圆心
        this.lineTo(0,0);
        // 还原
        this.restore();
        // 旋转至起点角度
        this.rotate(sDeg);
        // 从圆心连接到起点
        this.lineTo(radius,0);
        this.closePath();
        // 还原到最初保存的状态
        this.restore();
        return this;
    }

    //	返回数组的最大值
    Array.prototype.Max = function(){
        return Math.max.apply(null, this);
    }


    // 折线图
    function LineChart(data){
        var XNumber = data.datasets[0].data.length;	// X轴的点数（竖线的个数）
        var canvas = document.getElementById("myCanvas");
        var height = data.height/13;
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle="#f3f3f3";

        //	绘制竖线（竖线个数等于数据的个数）
        for (var i=0; i<XNumber; i++){
            var w = (800/XNumber) * i + 180;
            ctx.moveTo(w,50);
            ctx.lineTo(w,700);
            ctx.textAlign = "center";
            ctx.fillText(data.labels[i],w,720);
        }

        //	绘制横线
        for (var i=14; i>0; i--){
            ctx.moveTo(180,50*i);
            ctx.lineTo(180+ 800/XNumber*(XNumber-1),50*i);
            ctx.textAlign = "right";
            ctx.fillText(Math.floor((14-i)*height),175,50*i+3);
        }
        ctx.stroke();


        // 绘制折线并添加数据
        for (var i=0; i<data.datasets.length; i++){
            ctx.beginPath();
            ctx.strokeStyle = colorArr[i];
            for (var j=0; j<XNumber; j++){
                var w = (800/XNumber) * j + 180;

                // 绘制折线
                if (j == 0){
                    ctx.moveTo(w, Math.floor(700-650/data.height*data.datasets[i].data[j]));
                }else{
                    ctx.lineTo(w, Math.floor(700-650/data.height*data.datasets[i].data[j]));
                }
                ctx.textAlign = "left";
                ctx.fillStyle = "#f00";

                // 添加数据
                ctx.fillText(data.datasets[i].data[j], w, Math.floor(700-650/data.height*data.datasets[i].data[j]));
            }

            ctx.fillStyle = "#000";
            ctx.fillText(data.datasets[i].title, (800/XNumber) * (XNumber-1) + 200, Math.floor(700-650/data.height*data.datasets[i].data[XNumber-1]));
            ctx.stroke();
        }




    }

    var lineData = {
        labels : ["第一季度","第二季度","第三季度","十月","十一月","十二月","第四季度"],
        datasets : [
//            {
//                title: "2016年",
//                data : [65,59,90,81,56,55,40]
//            },
            {
                title: "2017年",
                data : [28,48,40,19,96,27,100]
            }
        ],
        height: 120
    };

    BarChart(lineData);
//    PieChart(lineData);
//    DoughnutChart(lineData);
    // 饼状图
    function PieChart(data){

        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var pre = 0;
        var count = 0;
        for (items in data){
            count += data[items];
            ctx.fillStyle=colorArr.shift();
            ctx.sector(500,400,350,2*Math.PI*pre,2*Math.PI*count).fill();
            ctx.fillStyle="#f3f3f3";
            // 填充文字
            ctx.fillText(items+":"+data[items], 500+300*Math.cos(2*Math.PI*(pre+data[items]/2)), 400+300*Math.sin(2*Math.PI*(pre+data[items]/2)));
            pre = count;
        }
    }


    // 柱状图
    function BarChart(data){
        var XNumber = data.datasets[0].data.length+1;	// X轴的点数（竖线的个数）
        var canvas = document.getElementById("myCanvas");
        var height = data.height/13;
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle="#f3f3f3";
        //	绘制竖线（竖线个数等于数据的个数）
        for (var i=0; i<XNumber; i++){
            var w = (800/XNumber) * i + 180;
            ctx.moveTo(w,50);
            ctx.lineTo(w,700);
            if (i != 0){
                ctx.textAlign = "center";
                ctx.fillText(data.labels[i-1],w-(400/XNumber),720);
            }
        }
        //	绘制横线
        for (var i=14; i>0; i--){
            ctx.moveTo(180,50*i);
            ctx.lineTo(180+800/XNumber*(XNumber-1),50*i);
            ctx.textAlign = "right";
            ctx.fillText(Math.floor((14-i)*height),175,50*i+3);
        }
        ctx.stroke();
        // 绘制柱状图并添加数据
        for (var i=0; i<data.datasets.length; i++){
            ctx.beginPath();
            ctx.fillStyle = colorArr[i];
            for (var j=0; j<XNumber; j++){
                var RectWidth = 648/XNumber/(data.datasets.length+1);	//	矩形的宽度
                var RectWidth=20;
                var w = (800/XNumber) * j + 180;
                // 矩形的Y轴
                var h = Math.floor(700-340/data.height*data.datasets[i].data[j]);
                // 绘制折线

                ctx.textAlign = "center";
                ctx.fillRect(w+RectWidth*0.5+RectWidth*i, h, RectWidth, 700-h);
                // 添加数据
                ctx.fillText(data.datasets[i].data[j], w+RectWidth*(i+1), h-3);
            }
        }
        ctx.stroke();
    }


    // 环形图
    function DoughnutChart(data){

        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var pre = 0;
        var count = 0;
        for (items in data){
            count += data[items];
            console.log("  pre:"+pre);
            console.log("count:"+count);
            ctx.fillStyle=colorArr.shift();
            ctx.sector(500,400,350,2*Math.PI*pre,2*Math.PI*count).fill();

            ctx.fillStyle="#000";


            // 填充文字
            ctx.fillText(items+":"+data[items],500+300*Math.cos(2*Math.PI*(pre+data[items]/2)),400+300*Math.sin(2*Math.PI*(pre+data[items]/2)));
            pre = count;
        }

        ctx.beginPath();
        ctx.fillStyle="#fff";
        ctx.arc(500,400,230,0,Math.PI*2);
        ctx.strokeStyle="#fff";
        ctx.fill();
        ctx.stroke();
        ctx.closePath();


    }


    //	环形图和饼状图的数据格式
    //	var arr = {"一月":0.2,"二月":0.18,"三月":0.23,"四月":0.12,"五月":0.27};



</script>
</body>
</html>
